<template>
	<view class="wrap">
		<view class="user-box" @click="gotoUserinfo()">
			<view class="user">
				<u--image :src="user.avatar" width="48px" height="48px" shape="circle"></u--image>
				<view class="info">
					<text class="username">{{ user.nickname }}</text>
					<text class="welcome">感谢您的支持~</text>
				</view>
			</view>
			<view class="more">
				<u-icon name="arrow-right" color="#909399"></u-icon>
			</view>		
		</view>
			
		<view class="order-panel">
			<view class="filter-item" @click="gotoOrderList('ALL')">
				<u-icon name="order" color="#5e5e5e" size="28px"></u-icon>
				<text class="label">全部订单</text>
			</view>
			<view class="filter-item" @click="gotoOrderList('WAIT_PAY')">
				<u-icon name="rmb" color="#5e5e5e" size="28px"></u-icon>
				<text class="label">待付款</text>
				<uni-badge type="error" text="1" absolute="rightTop"></uni-badge>
			</view>
			<view class="filter-item" @click="gotoOrderList('WAIT_RECEIVE')">
				<u-icon name="car" color="#5e5e5e" size="28px"></u-icon>
				<text class="label">待收货</text>
			</view>	
			<view class="filter-item" @click="gotoOrderList('WAIT_COMMENT')">
				<u-icon name="chat" color="#5e5e5e" size="28px"></u-icon>
				<text class="label">待评价</text>
			</view>
			<view class="filter-item" @click="gotoOrderList('POST_SALE')">
				<u-icon name="reload" color="#5e5e5e" size="28px"></u-icon>
				<text class="label">退款/售后</text>
			</view>	
		</view>
			
		<view class="menu-panel">
			<u-cell-group :border="false">
				<u-cell title="优惠券" size="small" :value="''" :isLink="true" @click="gotoCouponList()"></u-cell>
				<u-cell title="收货地址" size="small" :isLink="true" :border="false" @click="gotoAddressList()"></u-cell>
			</u-cell-group>
		</view>
		
		<view class="menu-panel">
			<u-cell-group :border="false">
				<u-cell title="在线客服" size="small" :isLink="true" :border="false"></u-cell>
			</u-cell-group>
		</view>
		
		<login-panel :visible="loginPanelVisible" 
			@close="closeLoginPanel" @completed="completedLogin"></login-panel>
			
		<x-tabbar currentTab="uc" :cartItemNum="cartProductNum"></x-tabbar>
	</view>
</template>

<script>
import XTabbar from "@/components/XTabbar.vue";
import LoginPanel from "@/components/LoginPanel.vue";
import { ucIndex } from "@/api/uc/index.js";
import { cartItemNum } from "@/api/cart.js";

export default {
	components: {
		XTabbar,
		LoginPanel
	},
	onShow() {
		this.getCartItemNum();	
	},
	onLoad() {
		if(this.isLogin()) {
			this.init();
		} else {
			this.loginPanelVisible = true;
		}
	},
	data() {
		return {
			cartProductNum: 0,
			loginPanelVisible: false,
			user: {
				avatar: '/static/default_avatar.jpg',
				nickname: '游客'
			},
			couponNum: 0
		}
	},
	methods: {
		init() {
			ucIndex().then(res=>{
				this.user = res.data.user;
				this.couponNum = res.data.couponNum;
			});
		},
		getCartItemNum() {
			if(this.isLogin()) {
				cartItemNum().then(res=>{
					this.cartProductNum = res.data.num;
				});
			}
		},
		getPhoneNumber(event) {
			console.log("message:" + event.detail.errMsg);
			if(event.detail.errMsg !== 'getPhoneNumber:ok') {
				console.log("用户拒绝");
				return;
			}
			
			uni.showLoading({
				title: '登录中...'
			});
			
			let phoneCode = event.detail.code;
			wxAccessToken().then(res1=>{
				let accessToken = res1.data.accessToken;
				wxPhoneLogin(accessToken, phoneCode).then(res2=>{
					console.log("=== token:" + res2.data.token);
					
					uni.setStorage({
						key: 'token',
						data: res2.data.token,
						success: function(){
							uni.hideLoading();
							console.log('token保存成功');
						}	
					});
				});
				
			});
		},
		closeLoginPanel() {
			this.loginPanelVisible = false;
		},
		completedLogin() {
			this.loginPanelVisible = false;
			this.init();	
		},
		gotoUserinfo() {
			if(!this.isLogin()) {
				this.loginPanelVisible = true;
				return;
			}
		},
		gotoOrderList(ident) {
			console.log('ident:' + ident);
			if(!this.isLogin()) {
				this.loginPanelVisible = true;
				return;
			}
			
			uni.navigateTo({
				url: '/pages/uc/orderList'
			});
		},
		gotoCouponList() {
			if(!this.isLogin()) {
				this.loginPanelVisible = true;
				return;
			}
		},
		gotoAddressList() {
			if(!this.isLogin()) {
				this.loginPanelVisible = true;
				return;
			}
			
			uni.navigateTo({
				url: '/pages/uc/addressList'
			});
		}
	}
}	
</script>

<style lang="less">
.wrap {
	display: flex;
	flex-direction: column;
	padding: 24rpx;
	box-sizing: border-box;
	background: #f8f8f8;
	height: 100vh;
}	

.user-box {
	display: flex;
	flex-direction: row;
	justify-content: space-between;	
	align-items: center;
	padding: 24rpx 36rpx;
	
	.user {
		display: flex;
		flex-direction: row;
		
		.info {
			display: flex;
			flex-direction: column;
			margin-left: 24rpx;
			
			.username {
				font-size: 15px;
				margin: 8rpx 0;
			}
			
			.welcome {
				font-size: 11px;
				color: #acacac;
			}
		}
	}
	
	.more {
		display: flex;
	}
}

.order-panel {
	display: flex;
	flex-direction: row;
	justify-content: center;
	margin: 12rpx 0;
	padding: 26rpx;
	border-radius: 24rpx;
	background: #fff;
	
	.filter-item {
		display: flex;
		flex-direction: column;
		width: 120rpx;
		margin: 5rpx;
		align-items: center;
		justify-content: center;
		
		.label {
			margin-top: 3px;
			font-size: 11px;
			color: #acacac;
		}
	}
}

.menu-panel {
	margin: 12rpx 0;
	background: #fff;
	border-radius: 24rpx;
	overflow: hidden;
}
</style>
